Component({
  properties: {
    todoList: {
      type: Array,
      value: []
    },
  },

  data: {
    doneTodoCount: 0,
  },

  observers: {
    'todoList': function(todoList) {
      this.setData({doneTodoCount: this.getDoneTodoCount()})
    }
  },

  methods: {
    getDoneTodoCount() {
      let count = 0
      const {todoList} = this.properties
      
      todoList.forEach((todo) => {
        count += todo.done ? 1 : 0
      })

      return count
    },

    changeAllTodoCheckBox(event) {
      let {doneTodoCount} = this.data
      const {todoList} = this.properties

      const done = doneTodoCount === todoList.length
      todoList.forEach(todo => {
        todo.done = !done
      })

      this.triggerEvent('updateData', {todoList})
    },

    deleteDoneTodo() {
      let {todoList} = this.properties

      todoList = todoList.filter((todo) => {
        return !todo.done
      })

      this.triggerEvent('updateData', {todoList})
    }
  }
})